/**
btn 组件, 用于创建按钮


属性:
-------------------------------------------------------------------------------------
       theme: 按钮主题皮肤, 可选值有: primary, none, link. 默认空
        size: 按钮大小, 可选值有: xs, s, m, l, xl
        type: 按钮type, 默认为button, 可以通过type设置为submit,在表单中
              可以进行提交
    disabled: 按钮是否禁用
-------------------------------------------------------------------------------------
 
 */


(function() {
    let {getAppPath} = require('electron').remote.app;
    let add_vue_component = require(getAppPath() + '/src/renderlib/vue/add-vue-component');
    let datetime = new Date().getTime();
    let className = `btn-comp-${datetime}`;
    
    add_vue_component('btn', {
        scss:`
<style type="text/scss">
    .${className} {
        border: solid 1px #ccc;
        color: #333;
        background-color: #fff;
        border-radius: 5px;
        outline: none;
        transition: all .5s, box-shadow 1s;
        
        &.notrans {
            transition:none;
        }
        
        &.clickeffect {
            box-shadow: #3c3c3c 0 0 3px;
        }
        
        &[disabled] {
            opacity: 0.3;
        }
        
        &:hover {
            border: solid 1px #a3a3a3;
            background: #ededed;
            color:black;
        }
        
        &.button-size-s {
            font-size: 13px;
            padding: 2px 6px;
        }
        
        &.button-size-xs {
            font-size: 12px;
            padding: 1px 4px;
        }
        
        &.button-theme-primary {
            background-color: #337ab7;
            border-color: #2e6da4;
            color:white;
        }
        
        &.button-theme-red {
            color: #fff;
            background-color: #c9302c;
            border-color: #ac2925;
        }
        
        &.button-theme-link {
            color:blue;
            background: none;
            border:none;
            text-decoration: underline;
            cursor:pointer;
        }
        
        &.button-theme-none {
            color:black;
            background: none;
            border:none;
            text-decoration: underline;
            cursor:pointer;
        }
        
        &.button-theme-link:hover {
            background: none;
            border:none;
            color:#0000c9;
        }
        
        &.button-theme-link.clickeffect {
            box-shadow:none;
        }
        
        &.button-size-m {
            font-size: 14px;
            padding: 4px 8px;
        }
        
        &.button-size-l {
            font-size: 16px;
            padding: 8px 14px;;
        }
    }
</style>
    `,
        template: `
        <button class="${className}"
                :type="type"
                :class="rootClass"
                v-on="$listeners"
                :disabled="disabled"
                :style="rootStyles"
                @click="showClickEffect" >
            <slot></slot>
        </button>
   `,
        
        mounted() {
        
        },
        
        props: {
            theme: {
                default:'',
            },
            
            size: {
                default: 'm',
            },
            
            type: {
                default:'button'
            },
            
            disabled: {
                default: false
            },
        },
        
        data() {
            return {
                clickEffect:false,
                clickEffectTimer: null,
                notrans:false
            }
        },
        
        methods: {
            showClickEffect() {
                clearTimeout(this.clickEffectTimer);
                this.notrans = true;
                this.clickEffect = true;
                
                this.$nextTick(() => {
                    this.clickEffectTimer = setTimeout(() => {
                        this.notrans = false;
                        this.clickEffect = false;
                    }, 50);
                });
            },
        },
        
        computed: {
            rootClass() {
                return [
                    this.disabled ? 'disabled' : '',
                    this.notrans ? 'notrans' : '',
                    this.clickEffect ? 'clickeffect' : '',
                    this.theme ? "button-theme-" + this.theme : '',
                    this.size ? "button-size-" + this.size : '',
                ]
            },
            
            rootStyles() {
                return {
                };
            }
        }
    });
})();


